<template>
    <div class="home">
        <table class="table-css">
            <tr>
                <td class="input-label">游戏：</td>
                <td>
                    <el-input v-model="form.gameName" placeholder="请输入游戏" input-style="color: #f56c6c; text-align: right;"/>
                </td>
            </tr>
            <tr>
                <td class="input-label">木又阝艮：</td>
                <td>
                    <div style="display: inline-block;">
                        <div style="display: inline-block;">
                            <el-checkbox-group v-model="gameType" @change="handleCheckedChange">
                                <el-checkbox 
                                    size="small"
                                    v-for="item in typeArray"
                                    :value="item"
                                    style="margin-right:3px"
                                >
                                    {{ item }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div style="display: inline-block;">
                            <el-checkbox v-model="allCheck" :indeterminate="isIndeterminate" size="small" @change="handleCheckAllChange">
                                全部
                            </el-checkbox>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="input-label">抖音昵称：</td>
                <td>
                    <el-input v-model="form.nickName" placeholder="请输入昵称" input-style="color: #f56c6c; text-align: right;"/>
                </td>
            </tr>
        </table>
        <div style="margin-top: 20px;">
            <el-button type="primary" @click="submitForm" style="margin-bottom: 18px">
                激 活
            </el-button>
        </div>
        <div style="margin-top: 10px;">
            <div v-for="item in textList" :style="{'color':randomColor()}">
                <span style="font-size: 16px;">
                    {{ item.nickName }} 已激活 {{ item.gameName }} {{ formatRelativeDate(item.date) }}
                </span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import Message from '~/utils/messageUtil'

const isIndeterminate = ref(false)
const allCheck = ref()
const gameType = ref()
const typeArray = ['魔改版', '0.05權限', '岱鑫*88888']
// 全选/反选
const handleCheckAllChange = (val) => {
    gameType.value = val ? typeArray : []
    isIndeterminate.value = false
}
const handleCheckedChange = (val) => {
  const checkedCount = val.length
  allCheck.value = checkedCount === typeArray.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < typeArray.length
}
const form = ref({
    gameName: '',
    nickName: ''
})
const textList = ref([])
// 新增
const submitForm = () => {
    if(!form.value.gameName || !form.value.nickName) {
        return
    }
    let json = {
        gameName: form.value.gameName,
        nickName: form.value.nickName,
        date: new Date()
    }
    Message('success', '激活成功')
    clearForm()
    if(textList.value.length === 0) {
        textList.value.push(json)
        return
    }
    let array = textList.value
    if(array.length  === 3) {
        array.splice(2, 1);
    }
    array.push(json)
    textList.value = array.sort(dateSort("date"))
}
const clearForm = () => {
    form.value = {
        gameName: '',
        nickName: ''
    }
    handleCheckAllChange(false)
    allCheck.value = false
    isIndeterminate.value = false
}
// 动态字体颜色
const randomColor = () => {
  let r, g, b;
  r = Math.floor(Math.random() * 256);
  g = Math.floor(Math.random() * 256);
  b = Math.floor(Math.random() * 256);
  return "rgb(" +r + ',' +g+ ',' +b+ ")";
}
// 日期格式化
const formatRelativeDate = (date) => {
    const now = new Date();
    // 计算时间差，并转换为秒
    const diff = (now - date) / 1000; 
    if (diff < 60) {
        let s = 1
        if(Math.floor(diff) > 0) {
            s = Math.floor(diff)
        }
        return `${s}秒前`;
    } else if (diff < 3600) {
        const minutes = Math.floor(diff / 60);
        const seconds = Math.floor(diff % 60);
        return `${minutes}分${seconds}秒前`;
    } else {
        const hours = Math.floor(diff / 3600);
        return `${hours}小时前`;
    }
}
// 排序
const dateSort = (property) => {
	return function(a, b) {
		var value1 = a[property];
		var value2 = b[property];
		return Date.parse(value2) - Date.parse(value1);
	}
}
</script>

<style>
.home {
    width: 370px;
    margin: 20px auto;
}
.form-div {
    margin-right: 50px;
}
.table-css {
    width: 370px;
    border-collapse: collapse; 
    border: 1px solid #ccc; 
    td {
        border: 1px solid #ccc; 
        padding: 10px 5px 10px 5px; 
    }
}
.input-label {
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: right;
    width: 85px;
}
</style>